<template>
  <view>
	<u-loading :show="makePicDone===false" mode="flower" size="68" class="loading" >加载中...</u-loading>
    <view class="final-pic">
      <image v-if="makePicDone===true" src="../../static/img/close_ico.png" alt="" class="close" @click="$emit('closePoster')"></image>
      <image v-show="makePicDone===true" class="final-img" @load="handleImgLoad" :src="imgUrl"></image>
    </view>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  name: 'ShareJob',
  props: ['tplIndex', 'infoid'],
  data () {
    return {
		globalImgUrl:getApp().globalData.imgUlr,
      makePicDone: false,
      imgUrl: ''
    }
  },
  watch: {
    tplIndex: function (newVal, oldVal) {
      this.makePicDone = false
      this.makePic()
    }
  },
  mounted () {
    this.makePic()
  },
  methods: {
    makePic () {
      http
        .get(api.create_poster, { type: 'job', id: this.infoid, index: this.tplIndex })
        .then(res => {
          this.imgUrl = res.data.data + '?_=' + Math.random()
		  this.$emit('emitImgUrl',this.imgUrl)
        })
        .catch(() => {})
    },
	//图片加载完成
	handleImgLoad(){
		this.makePicDone = true
	}
  }
}
</script>

<style lang="scss" scoped>

.loading{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
  .final-pic{
    position:relative;
    font-size:0;
    width:542rpx;
    height:960rpx;
  	margin: 0 auto;
    .final-img{
  		display: block;
  		width:100%;
  		height:100%;
      // width:642rpx;
      // height:1072rpx;
    }
  }
  .close{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: -20rpx;
    top: -20rpx; 
    z-index: 55;
  }

</style>
